<template>
    <div class="login-container">
        <div class="login-content">
            <h2>后台登录</h2>
            <el-form :model="formData">
                <el-form-item prop="username">
                    <el-input v-model="formData.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="formData.password" placeholder="密码" show-password type="password"></el-input>
                </el-form-item>
                <el-form-item prop="code" style="background-color: white;">
                    <div class="code-container">
                        <el-input v-model="formData.code" placeholder="验证码"></el-input>
                        <div class="code-svg" v-html="codeSvg" @click="getCode"></div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="requestLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                username: '',
                password: '',
                code: '',
            },
            codeSvg: '',
            codeText: ''
        };
    },
    mounted() {
        this.getCode()
    },
    methods: {
        // 登录
        requestLogin() {
            if (this.formData.username === '' || this.formData.password === '') {
                this.$message.error('用户名或密码不能为空');
                return;
            }

            this.codeText = this.codeText.toLowerCase();
            if (this.formData.code !== this.codeText) {
                this.$message.error('验证码错误');
                return;
            }

            this.$axios.post('/users/backend/login', {
                username: this.formData.username,
                password: this.formData.password
            })
                .then(response => {
                    if (response.data.code !== 1) {
                        this.$message.error(response.data.message);
                        return;
                    } else {
                        sessionStorage.setItem('token', response.data.token);
                        sessionStorage.setItem('userInfo', JSON.stringify(response.data.user));
                        this.$router.push({
                            name: 'backManage'
                        })
                    }

                })
                .catch(error => {
                    console.error('Login Failed', error);
                });
        },

        // 获取验证码
        getCode() {
            this.$axios.get('/users/backend/code').then(res => {
                if (res.data.code === 1) {
                    const {data, text} = res.data.data
                    this.codeSvg = data;
                    this.codeText = text;
                }
            }).catch(err => {
                console.log(err);
            })
        }
    }
};

</script>

<style>
.login-container {
    background: url('../assets//background.png') no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-content {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    width: 400px;

    text-align: center;
}

h2 {
    color: white;
    margin: 10px auto;
}

.code-container {
    width: 100%;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-svg {
    background-color: white;
    cursor: pointer;
    margin-left: 20px;
}

.code-svg svg {
    transform: scale(1.2)
}
</style>